<script setup lang="js">
import { nextTick, ref, useTemplateRef } from 'vue'
const count = ref(0)
const aTagRef = useTemplateRef('my-a-tag')
const logData = ref([])
function mylog(tag, text = "") {
  logData.value.push(`${tag}${text}`)
}
async function countUpRef() {
  count.value++
  mylog('----------')
  mylog('before nextTick')
  mylog('count', count.value)
  mylog('my-a-tag', aTagRef.value?.title)
  await nextTick()
  mylog('after nextTick')
  mylog('count', count.value)
  mylog('my-a-tag', aTagRef.value?.title)
}
</script>

<template>
  <q-banner class="bg-primary text-white">
    <p class="q-mb-md text-center text-h4">陈一非 23211860123</p>
  </q-banner>
  
  <q-page class="q-pa-md">
    <q-btn
      label="countUpRef"
      @click="countUpRef"
      color="primary"
      rounded
      class="q-mb-md"
    />

    <br>
    <q-link :title="count" ref="my-a-tag" class="q-mb-md">
      count的值：{{ count }}
    </q-link>

    <div class="q-mt-md">
      <p class="text-caption font-medium">日志记录：</p>
      <q-list bordered class="q-mt-sm">
        <q-item v-for="(item, idx) in logData" :key="idx">
          <q-item-section>
            {{ item }}
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </q-page>
</template>
